<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图制作</title>
		<!-- 轮播图：JavaScript技术完成
		     前端框架：简化开发模式，JavaScript技术完成的
			 使用最简答的方式，功能一致-->
			 <!-- terseBannerJS 专门针对轮播，使用方便-->
			 <!-- 1.轮播图样式 -->
			 <link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<!-- 3.类似于html固定写法【小心起名与轮播图框架冲突】 -->
		<!-- 3.1 main 样式为主 引入轮播 -->
		<div class="main"></div>
		<!-- 3.2 id=“animation” js行为为主：轮播行为 -->
		    <div id="animation"></div>
			<!-- class="container" 样式为主：开辟轮播空间 -->
		    	<div class="lunbotu">
					<!-- 轮播效果：延迟加载 -->
					<div class="banner" id="lazyload">
						<ul>
							<li><img src="img/banner01.jpg" alt="" /></li>
							<li><img src="img/banner02.jpg" alt="" /></li>
							<li><img src="img/banner03.jpg" alt="" /></li>
							<li><img src="img/banner04.jpg" alt="" /></li>
							<li><img src="img/banner05.jpg" alt="" /></li>
						</ul>
					</div>
				</div>
		<!-- 引入jquery封装轮播框架.js文件 -->
		<script src="js/highlight.pack.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery.terseBanner.min.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>